<script setup>
  import { onUnmounted, ref, watch } from "vue";
  import { PlayCircleOutlined, PauseCircleOutlined } from '@ant-design/icons-vue';

  const props = defineProps({
    url: {
      type: String,
      required: true
    },
    info: {
      type: Object,
      required: true
    },
    duration: {
      type: Number,
      default: 0
    },
    autoplay: {
      type: Boolean,
      default: false
    }
  })

  const audio = ref();
  const currentTime = ref(0);
  const playState = ref(props.autoplay)
  const total = ref(props.duration || 0);
  const muted = ref(false);
  const volume = ref(1);

  const playAudio = () => {
    audio.value.play();
    playState.value = true;
  }

  const pauseAudio = () => {
    audio.value.pause();
    playState.value = false;
  }

  const formatTime = (timeS) => {
    const seconds = Math.floor(timeS);

    var minutes = Math.floor(seconds / 60);
    var remainingSeconds = seconds % 60;

    var formattedMinutes = minutes < 10 ? "0" + minutes : minutes;
    var formattedSeconds =
      remainingSeconds < 10 ? "0" + remainingSeconds : remainingSeconds;

    return formattedMinutes + ":" + formattedSeconds;
  }

  const timeupdate = () => {
    if (!audio.value) {
      return
    }

    currentTime.value = Math.floor(audio.value.currentTime);
    total.value = Math.floor(audio.value.duration);
  }

  const changeTime = (val) => {
    audio.value.currentTime = val;
  }

  const changeVolume = (val) => {
    audio.value.volume = val;
  }

  const canPlay = () => {
    total.value = audio.value.duration;
  }

  watch(muted, () => {
    if (muted.value) {
      audio.value.muted = true;
    } else {
      audio.value.muted = false;

      if (volume.value == 0) {
        volume.value = 1;
      }
    }
  })

  onUnmounted(() => {
    audio.value && audio.value.pause();
  })

  defineExpose({ playAudio, pauseAudio });
</script>

<template>
   <div class="audio-container" :class="{ 'audio-container-active': true }">
    <div class="flex justify-between cursor-pointer align-center">
      <PauseCircleOutlined style="font-size: 30px" @click.stop="pauseAudio" v-if="playState"/>
      <PlayCircleOutlined style="font-size: 30px" @click.stop="playAudio" v-else/>
    </div>
    <div class="audio-info">
      <div class="audio-name">
        {{ info.name }}
        <span>
          {{ info.author }}
        </span>
      </div>
      <div class="semi-slider">
        <a-slider
          :min="0"
          :max="total"
          v-model:value="currentTime"
          :tipFormatter="formatTime"
          @afterChange="changeTime"
        />
      </div>
    </div>
    <div class="audio-volume">
      <div class="cursor-pointer volume-container">
        <a-tooltip  color="#ffffff">
          <template #title>
            <div style="height: 80px; padding: 5px 0px 10px;">
              <a-slider
                :min="0"
                :max="1"
                :step="0.2"
                :vertical="true"
                :disabled="muted"
                v-model:value="volume"
                :tipFormatter="null"
                @afterChange="changeVolume"
              />
            </div>
          </template>

          <CuIcon class="iconfont" :type="muted || volume == 0 ? 'icon-jingyin1' : 'icon-yinliang'" @click="muted = !muted"/>
        </a-tooltip>
      </div>
      <div class="duration">{{ formatTime(currentTime) }} / {{ formatTime(total) }}</div>
    </div>
    <audio
      :src="url"
      ref="audio"
      preload="auto"
      :autoplay="autoplay"
      @timeupdate="timeupdate"
      @canplay="canPlay"
      @ended="() => {
        playState = false
      }"
    ></audio>
  </div>
</template>

<style lang="less" scoped>
  .audio-container {
    align-items: center;
    background: #fff;
    bottom: 0;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, .05);
    display: flex;
    justify-content: space-between;
    left: 0;
    padding: 16px 24px;
    position: absolute;
    -webkit-transform: translateY(78px);
    transform: translateY(78px);
    transition: all .2s ease-out;
    width: 100%;

    &.audio-container-active {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    .audio-info {
      color: rgba(28, 31, 35, .8);
      display: flex;
      flex-direction: column;
      font-size: 14px;
      font-weight: 500;
      height: 46px;
      justify-content: space-around;
      overflow: hidden;
      padding: 0 6px;
      width: 260px;

      .audio-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        span {
          color: rgba(28, 31, 35, .35);
          font-size: 12px;
          margin-right: 8px;
        }
      }
    }

    .audio-volume {
      align-items: flex-end;
      color: rgba(28, 31, 35, .35);
      display: flex;
      flex-direction: column;
      font-size: 12px;
      margin-left: 16px;
      width: 70px;

      .volume-container {
        display: flex;
        margin-bottom: 4px;
        padding-top: 6px;
        position: relative;

        .iconfont {
          font-size: 18px;
        }
      }

      .duration {
        white-space: nowrap;
      }
    }

    :deep(.ss-slider) {
      margin: 0px;
    }

    :deep(.ss-slider-vertical) {
      margin: 0px;
    }
  }
</style>
